<template>
  <div class="home">
    <div class="stage-container" ref="stageContainer">
      <v-stage ref="stage" :config="stageSize">
        <v-layer ref="layer">
          <!-- Level 1 -->
          <TaskBox
            :x="180"
            :y="500"
            taskTitle="OCR"
            :taskProgressNum="taskProgressNum"
            :iconSrc="require('@/assets/images/task/icon/ocr.png')"
            :isShowPop="true"
            @clickNode="showDialog(1)"
          />
          <TaskLine :startPoint="[255, 500]" :endPoint="[625, 200]" />
          <TaskLine :startPoint="[255, 500]" :endPoint="[625, 400]" />
          <TaskLine :startPoint="[255, 500]" :endPoint="[625, 600]" />
          <TaskLine :startPoint="[255, 500]" :endPoint="[625, 800]" />

          <!-- Level 2 -->
          <TaskBox
            :x="700"
            :y="200"
            taskTitle="三合一自动鉴定"
            :taskProgressNum="99"
            :iconSrc="require('@/assets/images/task/icon/tern.png')"
          />
          <TaskLine :startPoint="[775, 200]" :endPoint="[1025, 300]" />
          <TaskLine :startPoint="[775, 200]" :endPoint="[1025, 500]" />
          <TaskLine :startPoint="[775, 200]" :endPoint="[1025, 700]" />

          <TaskBox
            :x="700"
            :y="400"
            taskTitle="实体识别"
            :taskProgressNum="100"
            :iconSrc="require('@/assets/images/task/icon/entity.png')"
          />
          <TaskLine :startPoint="[775, 400]" :endPoint="[1025, 300]" />
          <TaskLine :startPoint="[775, 400]" :endPoint="[1025, 500]" />
          <TaskLine :startPoint="[775, 400]" :endPoint="[1025, 700]" />

          <TaskBox
            :x="700"
            :y="600"
            taskTitle="人像检测识别"
            :taskProgressNum="50"
            :iconSrc="require('@/assets/images/task/icon/face.png')"
          />
          <TaskLine :startPoint="[775, 600]" :endPoint="[1025, 300]" />
          <TaskLine :startPoint="[775, 600]" :endPoint="[1025, 500]" />
          <TaskLine :startPoint="[775, 600]" :endPoint="[1025, 700]" />

          <TaskBox
            :x="700"
            :y="800"
            taskTitle="文书组件拆分"
            :taskProgressNum="100"
            :iconSrc="require('@/assets/images/task/icon/writ.png')"
          />
          <TaskLine :startPoint="[775, 800]" :endPoint="[1025, 300]" />
          <TaskLine :startPoint="[775, 800]" :endPoint="[1025, 500]" />
          <TaskLine :startPoint="[775, 800]" :endPoint="[1025, 700]" />

          <!-- Level 3 -->
          <TaskBox
            :x="1100"
            :y="300"
            taskTitle="文书档案结构化要\n素抽取"
            :taskProgressNum="70"
            :iconSrc="require('@/assets/images/task/icon/writ-extra.png')"
          />
          <TaskLine :startPoint="[1175, 300]" :endPoint="[1525, 400]" />
          <TaskLine :startPoint="[1175, 300]" :endPoint="[1525, 600]" />

          <TaskBox
            :x="1100"
            :y="500"
            taskTitle="婚姻档案结构化要\n素抽取"
            :taskProgressNum="100"
            :iconSrc="require('@/assets/images/task/icon/marriage-extra.png')"
          />
          <TaskLine :startPoint="[1175, 500]" :endPoint="[1525, 400]" />
          <TaskLine :startPoint="[1175, 500]" :endPoint="[1525, 600]" />

          <TaskBox
            :x="1100"
            :y="700"
            taskTitle="出生医学证明结构\n化要素抽取"
            :taskProgressNum="70"
            :iconSrc="require('@/assets/images/task/icon/birth-extra.png')"
          />
          <TaskLine :startPoint="[1175, 700]" :endPoint="[1525, 400]" />
          <TaskLine :startPoint="[1175, 700]" :endPoint="[1525, 600]" />

          <!-- Level 4 -->
          <TaskBox
            :x="1600"
            :y="400"
            taskTitle="档案智能开放审核"
            :taskProgressNum="taskProgressNum"
            :iconSrc="require('@/assets/images/task/icon/check.png')"
          />
          <TaskLine :startPoint="[255, 500]" :endPoint="[625, 400]" />

          <TaskBox
            :x="1600"
            :y="600"
            taskTitle="档案智能质检"
            :taskProgressNum="50"
            :iconSrc="
              require('@/assets/images/task/icon/equipment-inspection.png')
            "
          />
          <TaskLine :startPoint="[255, 500]" :endPoint="[625, 600]" />
        </v-layer>
      </v-stage>
    </div>

    <div
      class="dialog"
      v-show="isShowPop"
      :class="{ 'dialog-fullscreen': isFullScreen }"
    >
      <div class="dialog-title">
        <span>OCR 识别</span>

        <span>
          <i
            class="icon icon-fullscreen"
            @click="isFullScreen = !isFullScreen"
          ></i>
          <i
            class="icon icon-close"
            @click="
              isShowPop = false;
              isFullScreen = false;
            "
          ></i>
        </span>
      </div>
      <div class="dialog-header">
        <div class="dialog-header-left">OCR</div>
        <div class="dialog-header-right">
          <p class="dialog-header-id">SZ-202312010036</p>
          <div class="dialog-header-info">
            <p v-for="item in taskInfo" :key="item.title">
              <span>{{ item.title }}</span>
              <span>{{ item.value }}</span>
            </p>
          </div>
          <div class="dialog-header-progress">
            <div
              class="dialog-header-progress-bar"
              :style="{ width: '100%' }"
            ></div>
            100%
          </div>
        </div>
      </div>
      <div class="dialog-content">
        <p class="dialog-content-title">
          <span>任务日志</span>
        </p>
        <pre>
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-002.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-002.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-003.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-003.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-004.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-004.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-005.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-005.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-006.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-006.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-007.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-007.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-008.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-009.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-009.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-010.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-010.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-011.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-011.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-012.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-012.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-013.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-013.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-001.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-001.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-002.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-003.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-003.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-004.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-004.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-005.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-005.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-006.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-006.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-007.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-007.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-008.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-008.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0314-001-012.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0315-001-004.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0315-001-011.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0316-001-006.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0316-001-013.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0317-001-006.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0317-001-013.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0318-001-007.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0319-001-001.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0319-001-008.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-001.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0320-001-008.jpg
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-009.json
繁体或竖排没有width和height
15:39:39 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-010.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-010.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-011.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-011.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-012.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-012.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-013.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-013.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-014.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0321-001-014.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-001.jpg
15:39:40 [pool-2-thread-1] DEBUG org.mybatis.spring.SqlSessionUtils - Creating a new SqlSession
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-001.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-002.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-003.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-003.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-004.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-004.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-005.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-005.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-006.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-006.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-007.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-007.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-008.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-008.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-009.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-010.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-010.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-011.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-011.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-012.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-012.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-013.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-013.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-014.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-014.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-015.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-015.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0322-001-016.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-001.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-001.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-002.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-002.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-003.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-003.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-004.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-004.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-005.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-005.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-006.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-006.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-007.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-008.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-008.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-009.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-009.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-010.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-010.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-011.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-011.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-012.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-012.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-013.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-013.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-014.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-015.jpg
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0323-001-015.json
繁体或竖排没有width和height
15:39:40 [pool-2-thread-1] 正在处理文件：D035-2009-30-ZZ-0324-001-001.jpg
</pre
        >
      </div>
    </div>
  </div>
</template>

<script>
import TaskBox from '@/components/taskBox';
import TaskLine from '@/components/taskLine';

export default {
  components: {
    TaskBox,
    TaskLine,
  },
  data() {
    return {
      isFullScreen: false,
      taskInfo: [
        {
          title: '创建人',
          value: '151****5515',
        },
        {
          title: '需处理总数',
          value: '61001',
        },
        {
          title: '预计完成时间',
          value: '00:30:00',
        },
        {
          title: '实际完成时间',
          value: '00:12:30',
        },
      ],
      isShowPop: false,
      stageSize: {
        width: 1920,
        height: 950,
      },

      pageSize: {
        width: window.innerWidth,
        height: window.innerHeight,
      },

      taskProgressNum: 0,
    };
  },

  mounted() {
    this.initStageScale();
    this.mockProgressNum();
  },
  methods: {
    showDialog(index) {
      this.isShowPop = true;
    },
    initStageScale() {
      const stageContainer = this.$refs.stageContainer;
      const zoomSize = this.pageSize.width / 1920;
      stageContainer.style.width = '1920px';
      stageContainer.style.transform = `scale(${zoomSize}) translateX(-${
        (1 - zoomSize) * this.pageSize.width
      }px) translateY(-${((1 - zoomSize) * this.pageSize.height) / 2}px)`;
    },

    mockProgressNum() {
      let i = 0;
      const intervalId = setInterval(() => {
        this.taskProgressNum = i;
        if (i === 100) {
          clearInterval(intervalId);
          this.animation = 'stop';
        }
        i++;
      }, 1000);
    },

    handleClickNode(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  // background: #272727;
  background-image: url('../assets/images/task/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .stage-container {
    position: relative;
    overflow: hidden;
  }
}

.dialog {
  width: 840px;
  height: 600px;
  position: fixed;
  background: url('../assets/images/task/dialog-bg.png') no-repeat
    center/contain;
  z-index: 9999;
  top: calc(50% - 400px);
  left: calc(50% - 420px);
  padding: 40px;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);

  &-title {
    display: flex;
    justify-content: space-between;

    span {
      color: #0ba4c6;
      font-size: large;
      font-weight: bold;
      text-indent: 30px;
    }
  }

  &-header {
    display: flex;
    flex-flow: row nowrap;
    &-left {
      width: 90px;
      height: 70px;
      background: url('../assets/images/task/dialog-file.png') no-repeat
        center/cover;
      color: orange;
      font-size: large;
      font-weight: bold;
      line-height: 70px;
      text-align: center;
    }

    &-right {
      flex: 1;
      height: 120px;
      margin-left: 20px;
      background: url('../assets/images/task/dialog-header.png') no-repeat
        center/100% 95%;
    }

    &-id {
      font-size: large;
      font-weight: bold;
      margin: 8px;
      margin-left: 20px;
      color: #0ba4c6;
    }

    &-info {
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      flex-wrap: wrap;
      padding: 15px;

      p {
        margin: 5px;
        width: 40%;
        flex-shrink: 0;
        border-left: 4px solid grey;
        text-indent: 10px;

        span:first-child {
          color: rgb(143, 143, 143);
          &::after {
            content: '：';
          }
        }

        span:last-child {
          color: #0ba4c6;
        }
      }
    }

    &-progress {
      position: relative;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: white;
      font-weight: bold;

      &-bar {
        width: 100%;
        height: 26px;
        background-image: linear-gradient(to right, #92194d, #ef8d31);
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
      }
    }
  }

  &-content {
    border: 2px solid rgba(128, 128, 128, 0.371);
    height: calc(100% - 230px);
    overflow: hidden;
    position: relative;
    top: 40px;

    pre {
      position: relative;
      box-sizing: border-box;
      padding-left: 20px;
      top: 30px;
      left: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 50px);
      font-size: large;
      color: grey;
      line-height: 1.5;
      letter-spacing: -2px;
      overflow: auto;

      &::-webkit-scrollbar-track {
        background: #040404;
      }

      &::-webkit-scrollbar-thumb {
        background: #2c64b3;
        border-radius: 6px;
      }

      &::-webkit-scrollbar {
        width: 8px;
      }
    }

    &-title {
      position: absolute;
      top: -5px;
      left: 20px;
      color: grey;
      font-weight: bold;
    }
  }

  &-fullscreen {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-size: 100% 100%;
    background-color: black;
    background-image: none;
    padding: 50px 80px;
  }
}

.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 8px;
  cursor: pointer;

  &-close {
    width: 24px;
    height: 24px;
    background: url('../assets/images/task/icon/close.png') no-repeat
      center/contain;
    margin-right: 20px;
  }

  &-fullscreen {
    background: url('../assets/images/task/icon/fullscreen.png') no-repeat
      center/contain;
  }
}
</style>
